<template>
  <div :style="[{ height: $attrs.height - 100 + 'px' }]">
    <div :style="[{ 'overflow-y': 'auto' }, { height: $attrs.height - 150 + 'px' }]">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item title="样式配置" name="1">
          <el-form ref="configForm" :model="configFormData" :rules="rules" label-width="120px" class="selfDxFrom">
            <el-form-item label="内容行高(px)" prop="rowHeight">
              <el-input-number v-model.number="configFormData.rowHeight" :min="10" placeholder="请输入行高" />
            </el-form-item>
            <el-form-item label="时间刻度" prop="workTime">
              <el-radio-group v-model="configFormData.workTime">
                <el-radio v-for="item in workTimeList" :key="item.value" :label="item.value">{{ item.text }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="标题行高(px)" prop="scaleHeight">
              <el-input-number v-model.number="configFormData.scaleHeight" :min="30" placeholder="请输入顶部行高" />
            </el-form-item>
            <el-form-item label="行块高度(px)" prop="btnHeight">
              <el-input-number v-model.number="configFormData.btnHeight" :min="8" placeholder="请输入行块高度" />
            </el-form-item>
            <!-- 其他表单项 -->
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="行为配置" name="2">
          <el-form ref="behaviorForm" :model="configFormData" :rules="rules" label-width="120px" class="selfDxFrom">
            <el-form-item label="只读模式">
              <el-switch v-model="configFormData.readonly" active-text="开启" inactive-text="关闭" />
            </el-form-item>
            <el-form-item label="拖动任务">
              <el-switch v-model="configFormData.isDragProgress" active-text="开启" inactive-text="关闭" />
            </el-form-item>
            <!-- 其他表单项 -->
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>

    <div class="config-btn">
      <el-button @click="$emit('cancel')">关闭</el-button>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "totalConfig",
  data() {
    return {
      configFormData: {},
      activeName: "1",
      workTimeList: [
        { text: "时", value: "hour" },
        { text: "天", value: "day" },
        { text: "周", value: "week" },
        { text: "月", value: "month" },
        { text: "年", value: "year" },
      ],
      rules: {
        rowHeight: [{ required: true, message: "行高不能为空", trigger: "blur" }],
        workTime: [{ required: true, message: "时间刻度不能为空", trigger: "change" }],
        scaleHeight: [{ required: true, message: "行块高度不能为空", trigger: "blur" }],
        btnHeight: [{ required: true, message: "行块高度不能为空", trigger: "blur" }],
      },
      // 其他数据
    };
  },
  props: {
    configData: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    configData: {
      immediate: true,
      handler(newVal) {
        this.configFormData = newVal;
      },
      deep: true,
    },
    configFormData: {
      handler(newVal) {
        this.$emit("updateGantt", newVal);
      },
      deep: true,
    },
  },
  methods: {
    dataChanged(data, name) {
      this.configData[name] = data.value;
    },
  },
};
</script>
  
  <style scoped>
.config-btn {
  margin-top: 15px;
  float: right;
}
</style>